<template>
    <div>
        <div id="allCeutical"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUpdated } from 'vue'
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
const props = defineProps({
   data:{
    type: Array,
    default: null
   } 

})
onUpdated(() => {
    console.log(props.data);
    
    const ds = new DataSet();
    const dv = ds.createView().source(props.data);
    dv.transform({
        type: 'fold',
        fields: ['无菌输液器', '真空采血管', '中心静脉导管(单腔)', '无菌注射器', '灭菌脱脂棉球'], // 展开字段集
        key: '年龄段', // key字段
        value: '人口数量', // value字段
        retains: ['State'], // 保留字段集，默认为除fields以外的所有字段
    });
    // 数据被加工成 {State: 'WY', 年龄段: '小于5岁', 人口数量: 25635}

        const chart = new Chart({
            container: 'allCeutical',
            autoFit: true,
            height: 450,
            width:450,
        });

        chart.coordinate().transpose();

        chart.data(dv.rows);
        chart.scale('人口数量', { nice: true });

        chart.axis('State', {
            label: {
                offset: 12,
            },
        });

        chart.tooltip({
            shared: true,
            showMarkers: false,
        });

        chart
            .interval()
            .adjust('stack')
            .position('State*人口数量')
            .color('年龄段');

        chart.interaction('active-region');

        chart.render();

})

</script>

<style scoped>

</style>